<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">大小写转换</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left">
            <a class="btn btn-default mr-md" @click="toUp">大写</a>
            <a class="btn btn-default mr-md" @click="toLower">小写</a>
            <a class="btn btn-default mr-md" @click="toUpFirst">首字母大写</a>
            <a class="btn btn-default mr-md" @click="toMidLineLower">大写转中划+小写</a>
            <a class="btn btn-default mr-md" @click="toBotLineLower">大写转下划+小写</a>
            <a class="btn btn-default mr-md" @click="mLineUp">中划线转大写</a>
            <a class="btn btn-default" @click="bLineUp">下划线转大写</a>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="uplower" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import Pipe from '../index/pipe.vue'

/* 大小写转换 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false
    }
  },

  methods: {
    /**
     * @function 大写
    */
    toUp () {
      this.outputData = String(this.inputData).toUpperCase()
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 小写
    */
    toLower () {
      this.outputData = String(this.inputData).toLowerCase()
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 首字母大写
    */
    toUpFirst () {
      this.outputData = this.inputData.replace(/(\w)\w*/g, function (item) {
        let letters = item.split('')
        if (letters[0]) {
          letters[0] = letters[0].toUpperCase()
        }
        return letters.join('')
      })
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 大写转中划+小写
    */
    toMidLineLower () {
      this.outputData = this.inputData.replace(/\w+?([A-Z]+)/g, function (item) {
        let letters = arguments[1]
        let result = item.replace(letters, '-' + letters.toLowerCase())
        return result
      })
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 大写转下划+小写
    */
    toBotLineLower () {
      this.outputData = this.inputData.replace(/\w+?([A-Z]+)/g, function (item) {
        let letters = arguments[1]
        let result = item.replace(letters, '_' + letters.toLowerCase())
        return result
      })
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 中划线转大写
    */
    mLineUp () {
      this.outputData = this.inputData.replace(/-\w/g, function (item) {
        let result = item.toUpperCase().replace('-', '')
        return result
      })
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 下划线转大写
    */
    bLineUp () {
      this.outputData = this.inputData.replace(/_\w/g, function (item) {
        let result = item.toUpperCase().replace('_', '')
        return result
      })
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
  }
}
</script>

<style lang="less">
.json-input{
  height: 450px;
}
</style>
